<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    const list =[
    {
        "key": "BarCommon",
        "chartKey": "VBarCommon",
        "conKey": "VCBarCommon",
        "title": "柱状图",
        "category": "Bars",
        "categoryName": "柱状图",
        "package": "Charts",
        "chartFrame": "echarts",
        "image": "bar_x.png"
    },
    {
        "key": "BarCrossrange",
        "chartKey": "VBarCrossrange",
        "conKey": "VCBarCrossrange",
        "title": "横向柱状图",
        "category": "Bars",
        "categoryName": "柱状图",
        "package": "Charts",
        "chartFrame": "echarts",
        "image": "bar_y.png"
    },
    {
        "key": "BarLine",
        "chartKey": "VBarLine",
        "conKey": "VCBarLine",
        "title": "柱状图 & 折线图",
        "category": "Bars",
        "categoryName": "柱状图",
        "package": "Charts",
        "chartFrame": "echarts",
        "image": "bar_line.png"
    },
    {
        "key": "CapsuleChart",
        "chartKey": "VCapsuleChart",
        "conKey": "VCCapsuleChart",
        "title": "胶囊柱图",
        "category": "Bars",
        "categoryName": "柱状图",
        "package": "Charts",
        "chartFrame": "common",
        "image": "capsule.png"
    },
    {
        "key": "LineCommon",
        "chartKey": "VLineCommon",
        "conKey": "VCLineCommon",
        "title": "折线图",
        "category": "Lines",
        "categoryName": "折线图",
        "package": "Charts",
        "chartFrame": "echarts",
        "image": "line.png"
    },
    {
        "key": "LineLinearSingle",
        "chartKey": "VLineLinearSingle",
        "conKey": "VCLineLinearSingle",
        "title": "单折线渐变图",
        "category": "Lines",
        "categoryName": "折线图",
        "package": "Charts",
        "chartFrame": "echarts",
        "image": "line_linear_single.png"
    },
    {
        "key": "LineGradientSingle",
        "chartKey": "VLineGradientSingle",
        "conKey": "VCLineGradientSingle",
        "title": "单折线渐变面积图",
        "category": "Lines",
        "categoryName": "折线图",
        "package": "Charts",
        "chartFrame": "echarts",
        "image": "line_gradient_single.png"
    },
    {
        "key": "LineGradients",
        "chartKey": "VLineGradients",
        "conKey": "VCLineGradients",
        "title": "双折线渐变面积图",
        "category": "Lines",
        "categoryName": "折线图",
        "package": "Charts",
        "chartFrame": "echarts",
        "image": "line_gradient.png"
    },
    {
        "key": "PieCommon",
        "chartKey": "VPieCommon",
        "conKey": "VCPieCommon",
        "title": "饼图",
        "category": "Pies",
        "categoryName": "饼图",
        "package": "Charts",
        "chartFrame": "echarts",
        "image": "pie.png"
    },
    {
        "key": "PieCircle",
        "chartKey": "VPieCircle",
        "conKey": "VCPieCircle",
        "title": "饼图-环形",
        "category": "Pies",
        "categoryName": "饼图",
        "package": "Charts",
        "chartFrame": "echarts",
        "image": "pie-circle.png"
    },
    {
        "key": "ScatterCommon",
        "chartKey": "VScatterCommon",
        "conKey": "VCScatterCommon",
        "title": "散点图",
        "category": "Scatters",
        "categoryName": "散点图",
        "package": "Charts",
        "chartFrame": "echarts",
        "image": "scatter-multi.png"
    },
    {
        "key": "ScatterLogarithmicRegression",
        "chartKey": "VScatterLogarithmicRegression",
        "conKey": "VCScatterLogarithmicRegression",
        "title": "对数回归散点图",
        "category": "Scatters",
        "categoryName": "散点图",
        "package": "Charts",
        "chartFrame": "echarts",
        "image": "scatter-logarithmic-regression.png"
    },
    {
        "key": "MapBase",
        "chartKey": "VMapBase",
        "conKey": "VCMapBase",
        "title": "地图(可选省份)",
        "category": "Maps",
        "categoryName": "地图",
        "package": "Charts",
        "chartFrame": "common",
        "image": "map.png"
    },
    {
        "key": "MapAmap",
        "chartKey": "VMapAmap",
        "conKey": "VCMapAmap",
        "title": "高德地图",
        "category": "Maps",
        "categoryName": "地图",
        "package": "Charts",
        "chartFrame": "common",
        "image": "map_amap.png"
    },
    {
        "key": "Process",
        "chartKey": "VProcess",
        "conKey": "VCProcess",
        "title": "NaiveUI-进度",
        "category": "Mores",
        "categoryName": "更多",
        "package": "Charts",
        "image": "process.png"
    },
    {
        "key": "Radar",
        "chartKey": "VRadar",
        "conKey": "VCRadar",
        "title": "雷达图",
        "category": "Mores",
        "categoryName": "更多",
        "package": "Charts",
        "chartFrame": "common",
        "image": "radar.png"
    },
    {
        "key": "Funnel",
        "chartKey": "VFunnel",
        "conKey": "VCFunnel",
        "title": "漏斗图",
        "category": "Mores",
        "categoryName": "更多",
        "package": "Charts",
        "chartFrame": "echarts",
        "image": "funnel.png"
    },
    {
        "key": "Heatmap",
        "chartKey": "VHeatmap",
        "conKey": "VCHeatmap",
        "title": "热力图",
        "category": "Mores",
        "categoryName": "更多",
        "package": "Charts",
        "chartFrame": "common",
        "image": "heatmap.png"
    },
    {
        "key": "WaterPolo",
        "chartKey": "VWaterPolo",
        "conKey": "VCWaterPolo",
        "title": "水球图",
        "category": "Mores",
        "categoryName": "更多",
        "package": "Charts",
        "chartFrame": "common",
        "image": "water_WaterPolo.png"
    },
    {
        "key": "TreeMap",
        "chartKey": "VTreeMap",
        "conKey": "VCTreeMap",
        "title": "树形分布",
        "category": "Mores",
        "categoryName": "更多",
        "package": "Charts",
        "chartFrame": "common",
        "image": "tree_map.png"
    },
    {
        "key": "Graph",
        "chartKey": "VGraph",
        "conKey": "VCGraph",
        "title": "关系图",
        "category": "Mores",
        "categoryName": "更多",
        "package": "Charts",
        "chartFrame": "common",
        "image": "graph.png"
    },
    {
        "key": "Sankey",
        "chartKey": "VSankey",
        "conKey": "VCSankey",
        "title": "桑基图",
        "category": "Mores",
        "categoryName": "更多",
        "package": "Charts",
        "chartFrame": "common",
        "image": "sankey.png"
    },
    {
        "key": "Dial",
        "chartKey": "VDial",
        "conKey": "VCDial",
        "title": "表盘",
        "category": "Mores",
        "categoryName": "更多",
        "package": "Charts",
        "chartFrame": "common",
        "image": "dial.png"
    }
]


// 方式一 

    // console.log('list', list)

    // const packages = {
    //   categorys: [],
    //   categoryNames: [],
    // }
    // list.forEach(item => {
    //   const val =  packages.categorys[item.category]
    //   packages.categoryNames[item.category] = item.categoryName
    //   packages.categorys[item.category] = val && val.length ? [...val, item] : [item]
    // })

    // console.log('AA', packages)



    // 方式二

    const packages = list.reduce((acc, item) => {
      // 初始化类别数组
      if (!acc.categorys[item.category]) {
        acc.categorys[item.category] = [];
      }
      // 添加图表项到对应类别
      acc.categorys[item.category].push(item);
      // 设置类别名称
      acc.categoryNames[item.category] = item.categoryName;
      return acc;
    }, { categorys: {}, categoryNames: {} });

    console.log('AA', packages);




  </script>
</body>
</html>